<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PolygonOverlay</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        #app {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            background-color: #fff;
            z-index: 99999;
            padding: 5px 20px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=U3q69k0Dv0GCYNiiZeHPf7BS"></script>
    <script src="../dist/inmap.js"></script>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/iview/2.12.0/styles/iview.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/iview/2.12.0/iview.min.js"></script>
</head>

<body>
    <div id="app">
        请选择板块：
        <div class="ivu-btn-group">
            <i-button type="primary" @click="addFlashDot">添加气泡动画图层</i-button>
            <i-button type="primary" @click="addDot">添加散点图层</i-button>
            </i-button-group>
        </div>
        <div class="ivu-btn-group" style="margin-left:20px;">
            <i-button type="primary" @click="addFlashDot2">添加气泡动画图层</i-button>
            <i-button type="primary" @click="addImg">添加图标图层</i-button>
        </div>
    </div>
    <div id="allmap"></div>
</body>
<script>
    let data1 = [{
        name: '北京',
        geometry: {
            type: 'Point',
            coordinates: ['116.3', '39.9']
        },
        style: {
            size: 15,
        }
    }, {
        name: '上海',
        geometry: {
            type: 'Point',
            coordinates: ['121.29', '31.11']
        },
        style: {
            size: 10
        }
    }, {
        name: '福建',
        geometry: {
            type: 'Point',
            coordinates: ['117.984943', '26.050118']
        },
        style: {
            size: 6
        }
    }, {
        name: '广东',
        geometry: {
            type: 'Point',
            coordinates: ['113.394818', '23.408004']
        },
    }, {
        name: '广西',
        geometry: {
            type: 'Point',
            coordinates: ['108.924274', '23.552255']
        },
    }];
    let data2 = [{
        name: '北京',
        geometry: {
            type: 'Point',
            coordinates: ['116.3', '39.9']
        },
        style: {
            speed: 1,
            size: 28
        }

    }, {
        name: '上海',
        geometry: {
            type: 'Point',
            coordinates: ['121.29', '31.11']
        },
        style: {
            speed: 0.3,
            radius: 40,
        }

    }, {
        name: '福建',
        geometry: {
            type: 'Point',
            coordinates: ['117.984943', '26.050118']
        },
        style: {
            speed: 0.45,
            size: 12
        }

    }, {
        name: '广东',
        geometry: {
            type: 'Point',
            coordinates: ['113.394818', '23.408004']
        },
        style: {
            speed: 0.7,
        }

    }, {
        name: '广西',
        geometry: {
            type: 'Point',
            coordinates: ['108.924274', '23.552255']
        },
        style: {
            speed: 1,
            radius: 50,
        }

    }];
    let data3 = [{
        name: '北京',
        geometry: {
            type: 'Point',
            coordinates: ['116.3', '39.9']
        },
        style: {
            speed: 1,
        }


    }, {
        name: '上海',
        geometry: {
            type: 'Point',
            coordinates: ['121.29', '31.11']
        },
        style: {
            speed: 0.4,
        }

    }, {
        name: '福建',
        geometry: {
            type: 'Point',
            coordinates: ['117.984943', '26.050118']
        },
        style: {
            speed: 0.45
        }

    }, {
        name: '广东',
        geometry: {
            type: 'Point',
            coordinates: ['113.394818', '23.408004']
        },
        style: {
            speed: 0.7,
        }

    }, {
        name: '广西',
        geometry: {
            type: 'Point',
            coordinates: ['108.924274', '23.552255']
        },
        style: {
            speed: 1
        }

    }];
    var inmap = new inMap.Map({
        id: 'allmap',
        skin: "WhiteLover",
        center: [105.403119, 38.028658],
        zoom: {
            value: 5,
            show: true,
            max: 18,
            min: 5
        },
    })


    let overlays = [];
    var inMapVue = new Vue({
        el: '#app',
        data: {},
        methods: {
            clear: function () {
                overlays.forEach(function (item) {
                    inmap.remove(item);
                });
            },
            addDot: function () {
                var overlay = new inMap.PointOverlay({
                    tooltip: {
                        show: true,
                        formatter: "{name}"
                    },
                    style: {
                        normal: {
                            backgroundColor: "#f73c3c",
                            shadowColor: "#999", // 投影颜色
                            shadowBlur: 5, // 投影模糊级
                            size: 11,
                            borderWidth: 0,
                        },
                        mouseOver: {
                            backgroundColor: "#f73737",
                            borderColor: "#f73737",
                            borderWidth: 3,
                            shadowBlur: 0, // 投影模糊级
                        }
                    },
                    data: data1,
                });
                inmap.add(overlay);
                overlays.push(overlay);
            },
            addFlashDot: function () {
                this.clear();

                var overlay = new inMap.PointAnimationOverlay({
                    style: {
                        fps: 25, //动画帧数
                        color: "#f18080",
                        size: 20,
                        speed: 0.15
                    },
                    data: data2
                });
                inmap.add(overlay);
                overlays.push(overlay);
            },
            addFlashDot2: function () {
                var overlay = new inMap.PointAnimationOverlay({
                    style: {
                        fps: 25, //动画帧数
                        color: "#f18080",
                        size: 30,
                        speed: 0.4
                    },
                    data: data3
                });
                inmap.add(overlay);
                overlays.push(overlay);
            },
            addImg: function () {
                var img = "./img/scenic.png";
                var overlay = new inMap.ImgOverlay({
                    tooltip: {
                        show: true,
                        formatter: "{name}"
                    },
                    style: {
                        normal: {
                            icon: img,
                            width: 40,
                            height: 40,
                            offsets: {
                                top: "-50%",
                                left: "-50%",
                            }
                        }
                    },
                    data: data1,

                });
                inmap.add(overlay);
                overlays.push(overlay);
            }
        },
        mounted: function () {

        }
    })
</script>

</html>